import { ProCard } from 'szcd';
import { type ITabView } from '../../tabs/base';
import React from 'react';
import { useSnapshot } from 'valtio';
import styles from './index.module.less';

export interface ICommonPanelView {
  /** 修复render 不触发问题 */
  _refreshKey: number;

  title: string;
  tabs: Array<
    ITabView & {
      component: React.FC<{ service: ITabView } & React.HTMLAttributes<HTMLDivElement>>;
    } & {
      onShow?: () => void;
    }
  >;
}

const CommonPanel: React.FC<
  { service: ICommonPanelView } & React.HTMLAttributes<HTMLDivElement>
> = ({ service, ...restProps }) => {
  const snap = useSnapshot(service);
  // console.count('CommonPanel render');
  return (
    <ProCard
      className={styles.tabs + ' ---1'}
      tabs={{
        // type: 'card', //card式tab
        tabPosition: 'top',
        items: snap.tabs.length ? service.tabs.map((tab, key) => {
          return {
            key: String(key),
            label: tab.title,
            children: <tab.component key={key} service={tab} />,
          };
        }) : [],
        onChange: (key) => {
          service.tabs[Number(key)].onShow?.();
          // console.log('key', key);
          // service.tabs[key].onChange?.();
        }
      }}
      {...restProps}
    />
  );
};

export default CommonPanel;
